<template>
  <u-popup class="comp__bottom-popup" v-model="showPopup " :zIndex="zIndex" mode="bottom" border-radius="10" :closeable="closeable">
    <view class="popover-container">
      <!-- 头部 -->
      <view v-if="title" class="popup-header" :class="{'with-border': titleBorder}">
        <view class="header-content">{{title}}</view>
      </view>
      <slot v-else name="title"></slot>

      <slot></slot>
    </view>
  </u-popup>
</template>
<script>
export default {
  name: 'bottom-popup',

  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: { // 头部内容
      type: String,
      default: ''
    },
    titleBorder: { // 是否显示头部分割线（传title时有效）
      type: Boolean,
      default: true
    },
    zIndex: Number,
    closeable: Boolean
  },

  
  data() {
    return {
      showPopup: false
    }
  },

  watch: {
    value(val, oldVal) {
      if(val !== this.showPopup) {
        this.showPopup = val
      }
    },

    showPopup(val, oldVal) {
      if(val !== this.value) {
        this.$emit('input', val)
      }
    }
  }
}
</script>
<style lang="less">
.comp__bottom-popup {
  .popover-container {
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;

    .popup-header {
      
      height: 100rpx;
      line-height: 100rpx;
      padding-left: 30rpx;
      box-sizing: border-box;
      font-size: 36rpx;
      font-weight: 600;
      

      .header-content {
        .line-ellipsis;
        
        width: 80%;
      }
      
      &.with-border {
        border-bottom: 1rpx solid #EAEAEA;
      }
    }
  }
}


</style>